<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
	</head>
	<style type="text/css">
		ul,li,ol{
			padding-left:0;
		}
		.power {
			padding: 20px 20px 0;
		}
		
		.powerNext {
			position: relative;
		}
		
		.powerNext:before {
			content: '';
			position: absolute;
			left: -14px;
			top: -23px;
			width: 1px;
			height: 100%;
			background: #ccc;
			z-index: 1;
		}
		
		.power input[type=checkbox] {
			margin-right: 5px;
			width: 14px;
			height: 14px;
			position: relative;
			z-index: 3;
			vertical-align: sub;
		}
		
		.power ul {
			padding-left: 30px;
		}
		
		.power label {
			font-weight: normal;
		}
		
		.power ul>li,
		.power ol>li,
		.power dl>dd {
			padding-inline-start: 0;
			list-style: none;
			height: 35px;
		}
		
		.power ul>li {
			position: relative;
		}
		
		.power ul>li>i {
			position: absolute;
			left: -21px;
			top: 4px;
			height: 14px;
			width: 14px;
			background: url(dist/img/item_close.png);
			cursor: pointer;
		}
		
		.power ul>li>i.on {
			background: url(dist/img/item_open.png);
		}
		
		.power ol>li {
			padding-left: 30px;
			position: relative;
		}
		
		.power ol>li:before {
			content: '';
			position: absolute;
			top: 11px;
			left: -13px;
			height: 1px;
			width: 45px;
			background: #ccc;
		}
		
		.power dl>dd {
			padding-left: 60px;
			position: relative;
		}
		
		.power dl>dd:before {
			content: '';
			position: absolute;
			top: 13px;
			left: 36px;
			height: 1px;
			width: 24px;
			background: #ccc;
		}
		
		.power dl>dd:after {
			content: '';
			position: absolute;
			top: -21px;
			left: 36px;
			height: 100%;
			width: 1px;
			background: #ccc;
		}
		
	</style>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">
			<div class="content-wrapper">
				<section class="content-header ">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>系统设置</a>
						</li>
						<li class="active">权限管理</li>
					</ol>
				</section>
				<section class="content">
					<div class="box box-primary">
						<div class="box-header with-border">

							<!-- /.box-tools -->
						</div>
						<div class="box-body">
							<div class="row" style="margin: 0;">
								<div class="col-sm-12" style="margin: 10px 0;padding: 0;">
									<label class="margin-bottom-none col-xs-3" style="font-weight: normal;line-height: 2;min-width: 200px;">角色名称：<input type="text" class="form-control" id="name"/></label>
								</div>
								<div class="col-sm-12" style="margin: 0 0 10px">
									<button  class="btn bg-primary margin" id="save"><i class="fa fa-save"></i>&nbsp;保存</button>
								</div>
								<div class="col-sm-12">
									<div class="power"></div>
								</div>
							</div>
						</div>

					</div>

				</section>

			</div>
		</div>
		
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
		<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
		
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		
		<script src="dist/js/adminlte.min.js"></script>
		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>

		<script type="text/javascript">
			$("a[pageid='23']").parent("li").addClass("active").parents(".treeview").addClass("menu-open").find("ul.treeview-menu").show()
			
			function addPower(roleDetails){
				$.ajax({
					type: "post",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					url: url + "Back_RoleAdd",
					async: true,
					dataType: 'json',
					data: {
						data:JSON.stringify({
							role_name:$("#name").val(),
							role_array:roleDetails
						})
					},
					success:function(res){
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
						} else if(res.status == 1) {
							alert("添加成功!");
							window.location.href="admin_power.html";
						}else{
							move("error",res.msg);
						}
					}
				})
			}
			
			function update(roleDetails){
				$.ajax({
					type: "post",
					url: url + "Back_RoleUpdate",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					async: true,
					dataType: 'json',
					data:{
						data:JSON.stringify({
							id:GetRequest().id,
							role_name:$("#name").val(),
							role_array:roleDetails,
							status:1
						})
					},
					success:function(res){
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
						} else if(res.status == 1) {
							alert("修改成功!");
							window.location.href="admin_power.html";
						}else{
							move("error",res.msg);
						}
					}
				})
			}
			
			$(function() {
				console.log()
				$("a[pageid=402]").parent().addClass("active").parents("ul.treeview-menu").show().parents('li').addClass("menu-open")    
				//eq(5).addClass("menu-open").find("ul.treeview-menu").show().find("li").eq(2).addClass("active");
				
				$(".sidebar a[href='account-power.html']").parent().addClass('active')
				$(".sidebar a[href='account-power.html']").parent().parent().parent().addClass('active')
				$('.power').on('click', 'i', function() {
					if($(this).hasClass('on')) {
						$(this).removeClass('on')
						$(this).parent().next().slideDown()
					} else {
						$(this).addClass('on')
						$(this).parent().next().slideUp()
					}
				})
				$('.power').on('click', 'ul>li label', function() {
					if($(this).find('input[type=checkbox]').prop('checked') == true) {
						$(this).parent().next().find('input[type=checkbox]').prop('checked', true)
					} else {
						$(this).parent().next().find('input[type=checkbox]').prop('checked', false)
					}
				})
				$('.power').on('click', 'ol>li label', function() {
					if($(this).parent().next().prop('tagName') == 'DL') {
						if($(this).find('input[type=checkbox]').prop('checked') == true) {
							$(this).parent().next().find('input[type=checkbox]').prop('checked', true)
						} else {
							$(this).parent().next().find('input[type=checkbox]').prop('checked', false)
						}
					}

				})
				$('.power').on('change', 'ol>li label', function() {
					if($(this).find('input[type=checkbox]').prop('checked') == true) {
						$(this).closest('.powerNext').prev().find('input[type=checkbox]').prop('checked', true)
					}
					var oLabel = $(this).closest('.powerNext').find('input[type=checkbox]')
					var oThis = $(this)
					for(var i = 0; i < oLabel.length; i++) {
						if(oLabel.eq(i).prop('checked') == true) {
							break;
						} else if(oLabel.eq(i).prop('checked') == false && i == oLabel.length - 1) {
							oThis.closest('.powerNext').prev().find('input[type=checkbox]').prop('checked', false)
						}
					}
				})
				$('.power').on('click', 'dl>dd label', function() {
					if($(this).find('input[type=checkbox]').prop('checked') == true) {
						$(this).closest('.powerNext').prev().find('input[type=checkbox]').prop('checked', true)
					}
					var oThis = $(this)
					var oLabelNext = $(this).closest('dl').find('input[type=checkbox]')
					for(var i = 0; i < oLabelNext.length; i++) {
						if(oLabelNext.eq(i).prop('checked') == true) {
							oThis.closest('dl').prev().find('input[type=checkbox]').prop('checked', true)

							break;
						} else if(oLabelNext.eq(i).prop('checked') == false && i == oLabelNext.length - 1) {
							oThis.closest('dl').prev().find('input[type=checkbox]').prop('checked', false)
						}
					}
					var oLabel = $(this).closest('.powerNext').find('input[type=checkbox]')

					for(var i = 0; i < oLabel.length; i++) {
						if(oLabel.eq(i).prop('checked') == true) {
							break;
						} else if(oLabel.eq(i).prop('checked') == false && i == oLabel.length - 1) {
							oThis.closest('.powerNext').prev().find('input[type=checkbox]').prop('checked', false)
						}
					}
				})

				$.ajax({
					"type": 'post',
					"url": url + "Back_AuthList",
					'contentType': "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					success: function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status == 1) {
							var data = res.data;
							var str = '';
							for(var i=0;i<data.length;i++){
								if(data[i].pid==0){
									str+='<ul class="col-xs-2" style="min-width:230px;min-height:300px;"><li><i></i><label><input type="checkbox" code="' + data[i].id + '"/>' + data[i].auth_name + '</label></li><div class="powerNext" power_id="'+data[i].id+'"><ol></ol></div></ul>';
								}
							}
							$(".power").append(str)
							
							var sonStr="";
							for(var i=0;i<data.length;i++){
								if(data[i].pid!=0){
									var sonStr='<li><label><input type="checkbox" code="' + data[i].id + '"/>' + data[i].auth_name + '</label></li>'
									$(".power ul .powerNext[power_Id="+data[i].pid+"] ol").append(sonStr)
								}
							}
							
							if(GetRequest().id){
								$("#name").val(localStorage.getItem("wallet_role_name"));
								$.ajax({
									type: "post",
									contentType: "application/x-www-form-urlencoded",
									headers: {
										"auth-token": localStorage.getItem("wallet_token")
									},
									url: url + "Back_RoleDetailById",
									async: true,
									data:{
										data:JSON.stringify({
											role_id:GetRequest().id
										})
									},
									dataType: 'json',
									success:function(res){
										if(res.status==1){
											$.each(res.data,function(index,item){
												$("[code = "+item.id+"]").prop("checked",true);
												$("[code = "+item.pid+"]").prop("checked",true);
											})
										}else{
											move("error",res.error);
										}
//										
									}
								})
							}
						} else {
							alert(res.msg)
						}
					},
					error: function() {
						//					error()
					}
				});
				
				
				
				$("#save").click(function() {
					if($("#name").val() == ""){
						alert("角色名称不能为空")
						return false;
					}
					var roleDetailsArr=[];
					$.each($(".power input:checked"),function(index,item){
						roleDetailsArr.push($(".power input:checked").eq(index).attr("code"));
					});
//					roleDetails = roleDetailsArr.join(',')
					console.log(roleDetailsArr)
					if(GetRequest().id){
						update(roleDetailsArr);
					}else{
						addPower(roleDetailsArr);
					}
				})
			})
		</script>
	</body>
</html>